<template>
  <div class="countyList">
    <van-list>
      <van-cell class="return-style" @click="returnCity">
        <van-icon name="arrow-left" color="#DC4630"/><span class="return-text-style">返回城市列表</span>
      </van-cell>
      <van-cell v-for="item in communityList" :key="item.regionCode" :title="item.regionName" @click="communitySel(item)"/>
    </van-list>
  </div>
</template>

<script>
export default {
  name: "CommunityList",
  components: {},
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      communityList: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.communityList = this.list;
  },
  watch: {
    list: {
      handler: function(val) {
        this.communityList = val;
      },
      deep: true
    }
  },
  methods: {
    returnCity() {
      this.$emit('returnCity')
    },
    communitySel(data) {
      this.$emit('countySel', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.countyList {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .return-style {
    display: flex;
    align-items: center;
    .return-text-style {
      margin-left: 10px;
    }
  }
  /deep/ .van-cell__value {
    display: flex;
    align-items: center;
  }
}
</style>